<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>TabView</title>
	</head>
	<body>
	
<div id="elDemo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
        <li><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div><p>Tab One Content</p></div>
        <div><p>Tab Two Content</p></div>
        <div><p>Tab Three Content</p></div>
    </div>
</div>	

<hr /> 
	
<div id="elDemo2">
    <p>This example demonstrates how to create a basic TabView widget entirely from Javascript.</p>
</div>

	</body>
	
<!-- Dependencies -->
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">

<!-- optional skin for border tabs -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>

<!-- OPTIONAL: Connection (required for dynamic loading of data) -->
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>

<script type="text/javascript">


    function suppressChange(e) {  
        return false; // prevents content change
    }     

YAHOO.example.demo = function( ){
	var oDemo = new YAHOO.widget.TabView("elDemo", {activeIndex: 1});
	// YAHOO.example.demoEvents(oDemo);
	// YAHOO.example.demoConfig(oDemo);
};
YAHOO.util.Event.onContentReady('elDemo', YAHOO.example.demo);

YAHOO.example.demoClick = function() {
    var oDemo = new YAHOO.widget.TabView('elDemo');    
    oDemo.on('contentReady', function() {
		var oTab = this.getTab(1);    
        var handleClick = function(e) {
            alert('Clicked!');
			oTab.set('content', '<p>Updated tab content.</p>');
        };        
        oTab.addListener('click', handleClick);	    	
    });
};
YAHOO.example.demoClick();

YAHOO.example.demoContentChange = function() {
    var oDemo = new YAHOO.widget.TabView('elDemo');    
    oDemo.on('contentReady', function() {   
        var handleContentChange = function(e) {
	        alert(e.prevValue);
        };        
        this.getTab(1).addListener('contentChange', handleContentChange);
        this.getTab(0).addListener('contentChange', handleContentChange);
		this.getTab(0).set('content', '<p>Updated tab content.</p>');
    });
};
YAHOO.example.demoContentChange();

YAHOO.example.demoEvents = function (oDemo) {
    var tab0 = oDemo.getTab(0);    
    
	tab0.addListener('click', handleClick);

    tab0.addListener('contentChange', handleContentChange);	
    tab0.set('content', '<p>Updated tab content.</p>');	
	
	tab0.addListener('beforeContentChange', suppressChange);
    tab0.set('content', "<p>Don't update tab content.</p>");
	
    tab0.removeListener('beforeContentChange', suppressChange);
    tab0.set('content', '<p>Updated tab content again.</p>'); /* change applied */	
	};

YAHOO.example.demoConfig = function(oDemo) {	
    var index = oDemo.get('activeIndex'); 
    alert(index);  // alerts 1
    oDemo.set('activeIndex', 0); // make tab at index 0 active
    index = oDemo.get('activeIndex'); 
    alert(index);  // alerts 0		
	};


YAHOO.example.demo2 = function( ){
    var oDemo2 = new YAHOO.widget.TabView({id:'elDemo2'});
    oDemo2.addTab( new YAHOO.widget.Tab({
        label: 'Tab2 One Label',
        content: '<p>Tab2 One Content</p>',
        active: true
    }));    
    oDemo2.addTab( new YAHOO.widget.Tab({
        label: 'Tab2 Two Label',
        content: '<p>Tab2 Two Content</p>'
    }));    
    oDemo2.addTab( new YAHOO.widget.Tab({
        label: 'Tab2 Three Label',
        content: '<p>Tab2 Three Content</p>'
    }));    

    YAHOO.util.Event.onContentReady('elDemo2', function() {
        oDemo2.appendTo(this); /* append to #elDemo2 */
    });
};
YAHOO.example.demo2();

</script>

</html>
